<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>同步服务器管理后台</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
      crossorigin="anonymous"
    />
    <style>
      body {
        margin: 2em;
        text-align: center;
      }
      .plcol {
        /* background-color: red; */
        margin: 8px;
        padding: 1.25em;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/5.6.0/mobx.umd.js"></script>
    <script src="https://unpkg.com/mobx-react@5.4.3/index.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script type="text/babel" src="sync.js"></script>
    <script type="text/babel">
      class ServerInfo extends React.Component {
        constructor(props) {
          super(props);
          this.state = { liked: false };
        }
        render() {
          let { info } = this.props;
          let sepStyle = { width: 1, height: 20, backgroundColor: 'grey', marginLeft: 20, marginRight: 20 };
          return (
            <div className="col-12" style={{ margin: 5 }}>
              <div className="card " style={{ display: 'flex', height: 50, flexDirection: 'row', alignItems: 'center' }}>
                <span style={{ width: '30%' }}>
                  {info && (
                    <span>
                      {info.name + ':' + info.ip + ''}
                      {info.sshInfo.connected && <span style={{ color: 'red' }}>*{info.sshInfo.channels.length}</span>}
                    </span>
                  )}
                  {!info && <span>服务器</span>}
                </span>
                <span style={sepStyle} />
                <span style={{ width: '10%' }}>{this.props.info ? this.props.info.version : '版本'}</span>
                <span style={sepStyle} />
                <span style={{ width: '30%' }}>{this.props.info ? new Date(parseInt(this.props.info.lastHeartbeatRecv)).toLocaleString() : '同步时间'}</span>
                <span style={sepStyle} />
                {!this.props.info && '操作'}
                {this.props.info && (
                  <span style={{ display: 'flex', flexDirection: 'row' }}>
                    <a href="#" className="btn btn-primary" onClick={this.close.bind(this)}>
                      删除
                    </a>
                    <span style={{ marginLeft: 10 }} />
                    <a href="#" className="btn btn-primary" onClick={this.update.bind(this)}>
                      刷新
                    </a>
                  </span>
                )}
              </div>
            </div>
          );
        }

        close() {
          removeServer(this.props.info.name);
        }

        async update() {
          let [ok, err] = await updateServer(this.props.info.name);
          if (err) {
            alert(err);
          } else {
            // alert('刷新成功');
          }
        }
      }
    </script>
    <script type="text/babel">
      const store = mobx.observable({
        servers: [],
      });
      const { observer } = mobxReact;
      const { observable } = mobx;

      function ECRLoginInputter() {
        const [value, setValue] = React.useState('');
        return (
          // <div className="row" style={{ border: '1px black solid', padding: 5 }}>
          <div className="col">
            <input type="text" value={value} onChange={e => setValue(e.target.value)} />
            <span style={{ marginLeft: 10 }} />
            <a
              href="#"
              className="btn btn-primary"
              onClick={async () => {
                let [ok, err] = await setDockerRegistry(value);
                console.log('setDockerRegistry', err);
                if (!ok) return alert('调用失败！');
                if (err) return alert('设置失败:' + err);
                alert('设置成功');
              }}
            >
              设置docker仓库地址
            </a>
          </div>
        );
      }

      function ServerInputter() {
        const [ip, setIP] = React.useState(getCookie('sip') || 'aws10.xiaoting.io');
        const [name, setName] = React.useState(getCookie('sname') || 'aws10');
        return (
          <div className="row">
            <div className="col">
              <span>名字:</span>
              <input type="text" style={{ width: 80 }} value={name} onChange={e => setName(e.target.value)} />
              <span style={{ marginLeft: 30 }}>IP:</span>
              <input type="text" value={ip} onChange={e => setIP(e.target.value)} />
              <span style={{ marginLeft: 30 }} />
              <a
                href="#"
                className="btn btn-primary"
                onClick={async () => {
                  setCookie('sname', name);
                  setCookie('sip', ip);
                  let [ok, err] = await addServer(name, ip);
                  if (!ok) return alert('调用失败！');
                  if (err) return alert('添加失败:' + err);
                  reloadServerList();
                }}
              >
                添加
              </a>
            </div>
          </div>
        );
      }

      function UserPuller() {
        // const [ip, setIP] = React.useState(getCookie('sip') || 'aws10.xiaoting.io');
        // const [name, setName] = React.useState(getCookie('sname') || 'aws10');
        return (
          <div className="row">
            <div className="col">
              <a
                href="#"
                className="btn btn-primary"
                onClick={async () => {
                  let [ok, err] = await pullUser();
                  if (!ok) return alert('调用失败！');
                  if (err) return alert('添加失败:' + err);
                  reloadServerList();
                }}
              >
                刷新用户
              </a>
            </div>
          </div>
        );
      }
      function Application(props) {
        return (
          <div>
            <div className="container">
              <div className="row">
                <div className="col">
                  <h1>用户服务器</h1>
                </div>
              </div>
              <ServerInputter />

              <div className="row">
                <ServerInfo key="head" />
                {props.store.servers.map((v, k) => {
                  return <ServerInfo info={v} key={k} />;
                })}
              </div>

              <ECRLoginInputter key="head" />
              <div style={{ marginTop: 20 }} />
              <UserPuller />
            </div>
          </div>
        );
      }
      const MobApp = observer(Application);
      ReactDOM.render(<MobApp store={store} />, document.getElementById('container'));
      reloadServerList();

      document.title = '同步:' + location.href.replace('http://', '');
    </script>
  </body>
</html>
